<template>

   <div id="app">
      <router-view></router-view>
   </div>
</template>

<script setup lang="ts"></script>

<style lang="less">
// 全局 box-sizing 设置
*,
*::before,
*::after {
   box-sizing: border-box;
}

// 全局容器样式（替代 Bootstrap container）
.container {
   width: 100%;
   margin: 0 auto;
   padding: 0 15px;

   @media (min-width: 576px) {
      max-width: 540px;
   }

   @media (min-width: 768px) {
      max-width: 720px;
   }

   @media (min-width: 992px) {
      max-width: 960px;
   }

   @media (min-width: 1200px) {
      max-width: 1140px;
   }

   @media (min-width: 1400px) {
      max-width: 1320px;
   }
}
</style>

<style scoped lang="less">
#app {
   min-width: 320px;
}
</style>
